<template>
  <basic-dialog :visible="show"
                :title="`${label}明细`"
                min-width="800px"
                isShowClose
                @close="closeDialog"
                :isFullScreen="false"
                :isShowInnerLoading="isShowInnerLoading"
  >
    <yz-condition-filter
      v-model="queryParams"
      @resetSearch="resetSearch"
      @onSubmit="onSubmit"
      class="padding-t-20"
    >
      <select-tooltip v-model="queryParams.causeType"
                      isShowAll
                      :multiple="false"
                      v-if="type === 'stop'"
                      :options="causeTypeList"
                      :msg="`${this.statusList[1].label}类型`"/>
      <select-tooltip v-model="queryParams.cause"
                      isShowAll
                      :multiple="false"
                      v-if="type === 'stop'"
                      :options="causeList"
                      :msg="`${this.statusList[1].label}原因`"/>
      <select-tooltip v-model="queryParams.deviceIds"
                      isShowAll
                      :options="deviceList"
                      v-if="type === 'alarm'"
                      msg="加工设备"/>
    </yz-condition-filter>
    <div class="padding-l-20 padding-r-20">
      <q-table
        :data="tableData"
        :columns="tableColumns"
        row-key="id"
        class="myTable scroll inherit"
        :loading="isTableLoading"
        :pagination.sync="pagination"
        :hide-bottom="!!tableData.length"
        style="max-width: 100%;max-height: 320px; margin: 0"
        color="primary"
      >
      </q-table>
      <yz-pagination v-model="pagination" @onSearch="getList" style="margin: 0 -20px !important;;width: calc(100% + 40px) !important;"/>
    </div>
  </basic-dialog>
</template>

<script>
import { getAlarmList, getStopList, getCauseItem } from 'src/boot/status-monitor/status-overview'
import { getCauseTypeList } from 'src/boot/system/reason'
import _ from 'lodash'
import { getDeviceIds } from 'src/boot/statistics/device-rate'
import { mapGetters } from 'vuex'

export default {
  name: 'table-basic',
  props: {
    type: {
      type: String,
      default: 'stop'
    },
    label: {
      type: String,
      default: '停机'
    }
  },
  watch: {
    'queryParams.causeType': {
      handler (val, old) {
        this.type === 'stop' && this.getCauseItem()
      },
      deep: true,
      immediate: true
    }
  },
  data () {
    return {
      show: false,
      isShowInnerLoading: false,
      pagination: {
        pageNum: 1, // 当前页码
        pageSize: 15, // 每页条数
        rowsNumber: 0 // 总条数
      },
      deviceList: [],
      causeList: [],
      causeTypeList: [],
      tableData: [],
      queryParams: {
        cause: 'all',
        causeType: 'all',
        deviceIds: ['all']
      },
      params: {},
      isTableLoading: false
    }
  },
  computed: {
    ...mapGetters(['statusList']),
    tableColumns () {
      const tableColumns = [
        { name: 'deviceName', label: '设备', align: 'left', field: 'deviceName' }
      ]
      this.type === 'stop' && tableColumns.push({ name: 'stopTime', label: `${this.statusList[1].label}时长`, align: 'left', field: 'stopTime' })
      this.type === 'stop' && tableColumns.push({ name: 'percent', label: `${this.statusList[1].label}占比`, align: 'left', field: 'percent' })

      this.type === 'alarm' && tableColumns.push({ name: 'alarmCount', label: `${this.statusList[4].label}次数`, align: 'left', field: 'alarmCount' })
      this.type === 'alarm' && tableColumns.push({ name: 'alarmTime', label: `${this.statusList[4].label}时长`, align: 'left', field: 'alarmTime' })
      return tableColumns
    }
  },
  methods: {
    showDetail (params) {
      this.pagination.pageNum = 1
      this.show = true
      this.isShowInnerLoading = true
      this.params = params
      this.resetSearch()
      this.type === 'stop' && this.getCauseList()
      this.type === 'alarm' && this.getDeviceList()
      this.getList()
    },
    closeDialog () {
      this.show = false
      this.params = null
    },
    onSubmit () {
      this.pagination.pageNum = 1
      this.getList()
    },
    resetSearch () {
      this.queryParams = {
        cause: 'all',
        causeType: 'all',
        deviceIds: ['all']
      }
    },
    // 获取设备列表
    getDeviceList () {
      let schemeId = null
      let schemeLevel = null
      if (_.isNil(this.params.lineId)) {
        schemeId = this.params.workshopId
        schemeLevel = 2
      } else {
        schemeId = this.params.lineId
        schemeLevel = 3
      }

      getDeviceIds(schemeId, schemeLevel).then(res => {
        const ret = res.data
        const member = ret.list.map(v => {
          const item = v
          item.label = `${v.name}(${this.$utils.label(v.assetNumber)})`
          item.value = v.id
          return item
        })
        this.deviceList = member
        this.queryParams.deviceIds = ['all']
      }).finally(() => {
        this.isShowInnerLoading = false
      })
    },
    getCauseList () {
      getCauseTypeList(3, true).then(res => {
        let causeTypeList = []
        if (res.data.length) {
          causeTypeList = res.data.map(v => {
            const item = v
            item.value = v.id
            item.label = v.label
            return item
          })
        }

        this.causeTypeList = _.concat({
          value: -1,
          label: '空'
        }, causeTypeList)
      })
    },
    // 根据停机原因类型代码查询停机原因
    getCauseItem () {
      this.isShowInnerLoading = true
      const params = {}
      this.queryParams.causeType !== 'all' && (params['causeType'] = this.queryParams.causeType)
      getCauseItem(params).then(res => {
        this.queryParams.cause = 'all'
        const stopCauseList = []
        if (res.length) {
          res.forEach(o => {
            stopCauseList.push({
              value: o.id,
              label: o.label
            })
          })
        }
        this.causeList = stopCauseList
      }).finally(() => {
        this.isShowInnerLoading = false
      })
    },
    getList () {
      if (this.params) {
        this.isTableLoading = true
        this.type === 'stop' && this.getStopList()
        this.type === 'alarm' && this.getAlarmList()
      }
    },
    getStopList () {
      const params = {
        ..._.cloneDeep(this.params),
        pageNum: this.pagination.pageNum,
        pageSize: this.pagination.pageSize
      }
      this.queryParams.cause !== 'all' && (params['causeId'] = this.queryParams.cause)
      this.queryParams.causeType !== 'all' && (params['causeTypeId'] = this.queryParams.causeType)
      getStopList(params).then(res => {
        let tableData = []
        if (res.list.length) {
          tableData = res.list.map(item => {
            const haltingTime = this.$utils.label(item.haltingTime, 0)
            const totalHaltingTime = this.$utils.label(item.totalHaltingTime, 0)
            return {
              deviceName: `${this.$utils.label(item.deviceName)}(${this.$utils.label(item.deviceNumber)})`,
              percent: `${totalHaltingTime ? (haltingTime / totalHaltingTime * 100).toFixed(2) : '0.00'}%`,
              stopTime: this.$utils.secondToString(haltingTime)
            }
          })
        }
        this.tableData = tableData
        this.pagination.rowsNumber = res.total
      }).finally(() => {
        this.isTableLoading = false
      })
    },
    getAlarmList () {
      const params = {
        ..._.cloneDeep(this.params),
        pageNum: this.pagination.pageNum,
        pageSize: this.pagination.pageSize
      }
      this.queryParams.deviceIds[0] !== 'all' && (params['deviceIds'] = this.queryParams.deviceIds)
      getAlarmList(params).then(res => {
        let tableData = []
        if (res.list.length) {
          tableData = res.list.map(item => {
            return {
              deviceName: `${this.$utils.label(item.deviceName)}(${this.$utils.label(item.deviceId)})`,
              alarmCount: this.$utils.label(item.alarmCount, 0),
              alarmTime: this.$utils.secondToString(item.alarmTime)
            }
          })
        }
        this.tableData = tableData
        this.pagination.rowsNumber = res.total
      }).finally(() => {
        this.isTableLoading = false
      })
    }
  }
}
</script>

<style scoped lang="stylus">
</style>
